<template>
    <div class="RealtimeVideo">
        <div class="left">
            <div style="width: 20%;display: flex; justify-content: space-between; align-items: center;">
                <div style=" padding-left: 10px; width: 100%; display: flex; justify-content: space-between; align-items: center;" >
                    画面布局：
                    <div  :span='3' class='splitClass' style='background-color: #ff7e23;'>
                        <div @click='splitVideo(1)'>1</div>
                    </div>
                    <div :span='3' class='splitClass' style='background-color: #00d8cb;'>
                        <div @click='splitVideo(4)'>4</div>
                    </div>
                    <div  :span='3' class='splitClass' style='background-color: #681bb7;'>
                        <div @click='splitVideo(6)'>6</div>
                    </div>
                    <div  :span='3' class='splitClass' style='background-color: #ff2d12;'>
                        <div @click='splitVideo(9)'>9</div>
                    </div>
                    <div  :span='3' class='splitClass' style='background-color: #57c4ff;'>
                        <div @click='splitVideo(16)'>16</div>
                    </div>
                </div>
                
            </div>
            <div>
                <Button type="success" @click="saveSetting">保存界面配置</Button>
                <Button type="error" style="margin-left: 10px;" @click="clearSetting">重置</Button>
            </div>
                    
                <!-- <Panel name="摄像头列表">
                    摄像头列表
                    <div slot="content">
                        <Table ref="selection" size="small" :columns="cameraColumns" :data="cameraList" @on-selection-change="selectChange">
                            <template slot-scope="{ row, index }" slot="action">
                                <Button type="success" size="small" shape="circle" icon="ios-play" @click="viewCamera(row)"></Button>
                            </template>
                        </Table>
                    </div>
                </Panel> -->
        </div>
        <div class="right">
            <div :id="index" class="player" :class="cellClass(item)" v-for="item, index in cellCount" style="border: 1px solid;">
                <div style="height: 10%; display: flex; justify-content: space-between;align-items: center;">
                    <Select v-model="playerList[index].cameraId" style="width: 100px;" @on-select="selectChange">
                        <Option v-for="item in cameraList" :value="item.zlurl + '-' + index">{{ item.name }}</Option>
                    </Select>
                    <Button type="error" @click="clear(index)">清除</Button>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import videojs from "video.js"
import { Col } from "view-design";
import util from "../../api/util.js"
export default {
    data(){
        return {
            activeName:["画面分割","摄像头列表"],
            cellCount:0,
            cameraColumns:[
                {
                    type: 'selection',
                    width: 60,
                    align: 'center'
                },
                {
                    title:"摄像头名称",
                    zlurl:"name",
                    align:"center",
                    width:"100"
                },
                {
                    title:"操作",
                    key:"action",
                    align:"center",
                    slot:"action"
                }
            ],
            cameraList:[
            ],
            showList:[
            ],
            playerList:[]
        }
    },
    computed:{
        cellClass(){
            return function (index) {
                switch (this.cellCount) {
                    case 1:
                        return ['cell-player-1']
                    case 4:
                        return ['cell-player-4']
                    case 6:
                        return ['cell-player-6']
                    case 9:
                        return ['cell-player-9']
                    case 16:
                        return ['cell-player-16']
                    default:
                        break;
                }

            }
        }
    },
    methods:{
        async splitVideo(num){
            
            let self = this;
            for(let i = 0; i < this.playerList.length; i ++){
                
                if(this.playerList[i].player){
                    await this.playerList[i].player.dispose();
                    this.playerList[i].cameraId = "";
                    // var videoDom = document.getElementById("player" + i);
                    // console.log(videoDom);
                    // videoDom.parentElement.removeChild(videoDom);
                }
                this.playerList[i].player = null;
            }
            // setTimeout(() => {
            for(let i = 0; i < num; i++){
                let item = {
                    cameraId:"",
                    player:null
                };
                this.playerList[i] = item;
                
            }
            this.cellCount = num;
            self.initPlayer(num)
            // }, 2000);
            
            //this.playerList = [];
            
            
            
        },
        getCameraList(){
            let self = this;
            let param = {
                action: "getCameraData",
                pageSize: 10000,
                currentPage: 1
            }

            util.post(self, "camera/getCameraData", param, function (res) {
                self.cameraList = res.data.data.data;
            })
        },
        selectChange(value){
            let self = this;
            console.log(value);
            let zlurl = value.value.split("-")[0];
            let index = value.value.split("-")[1]
            self.playerList[parseInt(index)].player.src(`http://${zlurl}/hls.m3u8`)
        },
        initPlayer(count){
            let self = this;
            let num ;
            let param = {
                action: "getCameraData",
                pageSize: 10000,
                currentPage: 1,
                split:false
            }
            if(count != 0 ){
                this.cellCount = count;
                param.split = true;
                num = this.cellCount
                for(let i = 0; i< num; i ++){
                    let item = {
                        cameraId:"",
                        player:null
                    };
                    this.playerList[i] = item;
                }
            }
            
            

            util.post(self, "camera/GetSetting", param, function(res){
                console.log(res.data.data.cameras);
                if(res.data.data.isSetting && count == 0){
                    for(let i = 0; i< res.data.data.cellCount; i ++){
                        let item = {
                            cameraId:"",
                            player:null
                        };
                        self.playerList[i] = item;
                    }
                    self.cellCount = res.data.data.cellCount;
                    self.cameraList = res.data.data.cameras.data;
                    setTimeout(() => {
                        for(let i = 0; i < res.data.data.videoArr.length; i++){
                            let videoData = res.data.data.videoArr[i];
                            console.log(videoData);
                            var dom = document.getElementById(i);
                            console.log(i, dom);
                            var video = document.createElement("video");
                            video.id = "player" + i;
                            video.className = "video-js"
                            video.style.width = "100%";
                            video.style.height = "90%";
                            video.controls = true;
                            dom.appendChild(video);

                            var player = videojs("player" + i, {
                                autoplay:true,
                                controlBar:{  //总控制条
                                //这里可以自己控制各小组件的顺序和显示方式
                                    children: [
                                        {name: 'playToggle'}, // 播放按钮
                                        {name: 'currentTimeDisplay'}, // 当前已播放时间
                                        {name: 'progressControl'}, // 播放进度条
                                        {name: 'durationDisplay'}, // 总时间
                                        {name: 'audioTrackButton'},
                                        { // 倍数播放
                                            name: 'playbackRateMenuButton',
                                            'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                                        },
                                        {
                                            name: 'volumePanel', // 音量控制
                                            // inline: false, // 不使用水平方式
                                        },
                                    ],
                                    PictureInPictureToggle:true,  //画中画
                                    FullscreenToggle: true // 全屏
                                }
                            });
                            self.playerList[i].player = player;
                            self.playerList[i].cameraId = videoData;
                            self.playerList[i].player.src(`http://${videoData}/hls.m3u8`);
                            self.$forceUpdate();
                        }
                    }, 500);
                    
                }else {
                    self.cameraList = res.data.data.data;
                    let data = res.data.data.data;
                    for(let i = 0; i < num ; i ++){
                        var dom = document.getElementById(i);
                        var video = document.createElement("video");
                        video.id = "player" + i;
                        video.className = "video-js"
                        video.style.width = "100%";
                        video.style.height = "90%";
                        video.controls = true;
                        dom.appendChild(video);
                        var player = videojs("player" + i, {
                            autoplay:true,
                            controlBar:{  //总控制条
                            //这里可以自己控制各小组件的顺序和显示方式
                                children: [
                                    {name: 'playToggle'}, // 播放按钮
                                    {name: 'currentTimeDisplay'}, // 当前已播放时间
                                    {name: 'progressControl'}, // 播放进度条
                                    {name: 'durationDisplay'}, // 总时间
                                    {name: 'audioTrackButton'},
                                    { // 倍数播放
                                        name: 'playbackRateMenuButton',
                                        'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                                    },
                                    {
                                        name: 'volumePanel', // 音量控制
                                        // inline: false, // 不使用水平方式
                                    },
                                ],
                                PictureInPictureToggle:true,  //画中画
                                FullscreenToggle: true // 全屏
                            }
                        });
                        self.playerList[i].player = player;
                        if(i < data.length){
                            self.playerList[i].cameraId = data[i].zlurl + '-' + i;
                            self.playerList[i].player.src(`http://${data[i].zlurl}/hls.m3u8`)
                        }
                        
                        
                    }
                }
            })
            
            
        },
        clear(index){
            let self = this;
            console.log(this.playerList[index])
            
            this.playerList[index].player.dispose();
            var dom = document.getElementById(index);
            var video = document.createElement("video");
            video.id = "player" + index;
            video.className = "video-js"
            video.style.width = "100%";
            video.style.height = "90%";
            video.controls = true;
            dom.appendChild(video);
            let item = {
                cameraId:"",
                player:null
            }
            item.player = videojs("player" + index, {
                autoplay:true,
                controlBar:{  //总控制条
                //这里可以自己控制各小组件的顺序和显示方式
                    children: [
                        {name: 'playToggle'}, // 播放按钮
                        {name: 'currentTimeDisplay'}, // 当前已播放时间
                        {name: 'progressControl'}, // 播放进度条
                        {name: 'durationDisplay'}, // 总时间
                        {name: 'audioTrackButton'},
                        { // 倍数播放
                            name: 'playbackRateMenuButton',
                            'playbackRates': [0.5, 1, 1.5, 2, 2.5]
                        },
                        {
                            name: 'volumePanel', // 音量控制
                            // inline: false, // 不使用水平方式
                        },
                    ],
                    PictureInPictureToggle:true,  //画中画
                    FullscreenToggle: true // 全屏
                }
            });
            this.playerList[index] = item;
            this.$forceUpdate()
            
        },
        saveSetting(){
            let self = this;
            let params = {
                cellCount:this.cellCount,
                videoArr:[]
            }
            for(let i = 0; i < this.cellCount; i++){
                params.videoArr.push(this.playerList[i].cameraId);
            }
            util.post(self, "camera/SaveSetting", params, function(res){
                console.log(res);
                self.$Message.info(res.data.data);
            })
        },
        clearSetting(){
            let self = this;
            for(let i = 0; i < this.playerList.length; i++){
                if(this.playerList[i].player){
                    this.playerList[i].player.dispose()
                }
            }
            util.post(self, "camera/ClearSetting", {}, function(res){
                self.initPlayer(0);
                self.$Message.info(res.data.data);
            })
        }
    },
    mounted(){
        let self = this;
        //this.splitVideo(this.cellCount);
        //this.getCameraList();
        self.initPlayer(0);
        
    },
    beforeMount(){
        // for(let i = 0; i< this.cellCount; i ++){
        //     let item = {
        //         cameraId:"",
        //         player:null
        //     };
        //     this.playerList.push(item);
        // }
    },
    beforeDestroy(){
        for(let i = 0; i < this.playerList.length; i++){
            if(this.playerList[i].player){
                this.playerList[i].player.dispose()
            }
        }
    },
    
}
</script>
<style lang="less">
.RealtimeVideo{
    width: 99%;
    height: 97%;
    display: flex;
    flex-direction: column;
    
    .left{
        width: 100%;
        height: 5%;
        background-color: white;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        .splitClass {
            cursor: pointer;
            color: white;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
        }
        .ivu-collapse-content {
            color: #515a6e !important;
            padding: 0 ;
            background-color: #fff !important;
            .ivu-collapse-content-box {
                padding-top: 0 !important;
                padding-bottom: 0 !important;
            }
        }
    }
    .right{
        width: 100%;
        height: 93%;
        background-color: white;
        display: flex;
        flex-wrap: wrap;
        .player{
            border-radius: 8px;
            margin: 10px;
            padding: 10px;
        }
        .cell-player-1{
            width: 100%;
            height: 100%;
        }
        .cell-player-4{
            width: 48%;
            height: 48%;
        }
        .cell-player-6{
            width: 31.5%;
            height: 48%;
        }
        .cell-player-9{
            width: 31.5%;
            height: 31.5%;
        }
        .cell-player-16{
            width: 23.5%;
            height: 23.5%;
        }
    }
}
</style>